<template>
	<view class="container">
		<view class="box">
			<uni-forms :modelValue="form" :rules="rules" ref="formRef" label-width="140rpx" label-align="right">
				<uni-forms-item label="内容" name="content" required>
					<uni-easyinput type="textarea" v-model="form.content" placeholder="请输入内容" class="input-content"/>
				</uni-forms-item>
				<uni-forms-item label="评分" name="star" required>
					<uni-rate v-model="form.star" class="rating-star"/>
				</uni-forms-item>
				<uni-forms-item>
					<button type="primary" size="mini" @click="save" :loading="isSaving" class="save-button">保 存</button>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {},
			rules: {
				content: { rules: [{ required: true, errorMessage: '请填写内容' }] },
				star: { rules: [{ required: true, errorMessage: '请评分' }] }
			},
			isSaving: false // 新增变量用于控制保存按钮的加载状态
		}
	},
	onLoad(option) {
		this.form.orderId = option.orderId;
	},
	methods: {
		save() {
			this.$refs.formRef.validate().then(res => {
				this.isSaving = true; // 设置保存按钮为加载状态
				this.$request.post('/comment/add', this.form).then(res => {
					if (res.code === '200') {
						uni.showToast({
							title: '操作成功'
						});
						uni.navigateBack();
					} else {
						uni.showToast({
							icon: 'error',
							title: res.msg
						});
					}
				}).catch(err => {
					console.log('err', err);
				}).finally(() => {
					this.isSaving = false; // 无论请求成功与否，最终都要取消加载状态
				});
			}).catch(err => {
				console.log('validate err', err);
			});
		}
	}
}
</script>

<style scoped>
.container { padding: 20rpx; }
.box { background-color: #fff; padding: 20rpx; border-radius: 10rpx; box-shadow: 0 2px 12px rgba(0, 0, 0, .1); }
.input-content { font-size: 28rpx; padding: 10rpx; }
.rating-star { position: relative; top: 10rpx; }
.save-button { margin-top: 20rpx; width: 100%; }
</style>